<template>
    <div>
        <div class="paper-menus">
            <Button type="primary" @click="addCourse()">
                <Icon type="md-add-circle"/>
                <span class="add-paper-span">添加课程</span></Button>
        </div>
        <!--表格头部信息条-->
        <div class="ivu-mt ivu-alert ivu-alert-info ivu-alert-with-icon">
            <span class="ivu-alert-icon"><i class="ivu-icon ivu-icon-ios-information-circle"></i></span>
            <span class="ivu-alert-message"><div style="font-size: 14px;">总记录数 <strong
                style="color: rgb(45, 140, 240);">{{ courseList.length }}</strong> 条</div></span>
            <span class="ivu-alert-desc"></span>
        </div>
        <div class="table-note">
            <div class="exam-lists">
                <div class="exam-item" v-for="course in courseList">
                    <div class="course-cover">
                        <img v-if="course.fileUrl === '' || course.fileUrl === null"
                             src="http://cdn.tmooc.cn/bsfile//imgad///8D4204DFC45C40BCBF68150E442E1D18.png"/>
                        <img v-if="course.fileUrl !== '' && course.fileUrl !== null" :src="course.fileUrl"/>
                    </div>
                    <div class="over-difficulty"><span>所属试卷</span>
                        <div class="level">{{ course.noteTitle }}</div>
                    </div>
                    <div class="create-time">
                        <span class="subject-icon">题目标签<span class="icon_label">{{ course.categoryId }}</span></span>
                        <span>{{ dateFormat(course.createTime) }}</span>
                    </div>
                    <div class="option-menu">
                        <Upload action="http://localhost:9201/note/uploadCover" :format="['jpg','jpeg','png']"
                                :max-size="1024"
                                :before-upload="beforUpload">
                            <Button icon="ios-cloud-upload-outline">上传封面图片</Button>
                        </Upload>
                        <a class="add-subject-option" v-on:click="uploadModelModal(courseId)">
                            <Icon type="md-add"></Icon>
                            添加封面</a>
                    </div>
                </div>
            </div>
        </div>
        <!--添加试卷模态框-->
        <div class="add-paper-modal">
            <Drawer title="添加笔记" :closable="false" v-model="showDrawer" width="30%" scrollable>
                <Form :model="courseEntity" ref="courseEntity" :rules="noteRules" label-position="top">
                    <div class="add-note-items">
                        <FormItem label="视频标题" prop="courseTitle">
                            <Input v-model="courseEntity.courseTitle" placeholder="请输入视频标题"></Input>
                        </FormItem>
                        <FormItem label="视频地址" prop="url">
                            <Input v-model="courseEntity.url" placeholder="请输入视频标题"></Input>
                        </FormItem>
                        <FormItem label="视频类目" prop="categoryId" style="z-index: 1501">
                            <Select v-model="courseEntity.categoryId">
                                <Option v-for="category in categoryList" :value="category.id">{{
                                        category.categoryName
                                    }}
                                </Option>
                            </Select>
                        </FormItem>
                    </div>
                    <FormItem>
                        <Button type="primary" @click="saveCourse('courseEntity')">确定</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </div>
    </div>
</template>

<script>
import { globalUrl } from '@/api/doMain'

export default {
    inject: ['reload'], // 引入局部刷新到组件
    name: 'Course',
    created () {
        this.queryList()
    },
    data () {
        return {
            columns: [
                {
                    title: 'Id',
                    key: 'id',
                    type: 'selection',
                    width: 55
                },
                {
                    title: '类型',
                    key: 'type'
                },
                {
                    title: '名称',
                    key: 'courseTitle'
                },
                {
                    title: '难度',
                    key: 'level'
                },
                {
                    title: '类目',
                    key: 'categoryId'
                },
                {
                    title: '学习人数',
                    key: 'studyPerson'
                },
                {
                    title: '上传时间',
                    key: 'createTime'
                }
            ],
            courseList: [],
            showDrawer: false,
            noteRules: {
                courseTitle: []
            },
            courseEntity: {},
            categoryList: [],
            // 要上传的全部数据
            uploadCourse: {
                file: '',
                noteId: '',
            }
        }
    },
    methods: {
        queryList () {
            const that = this
            this.http.post(globalUrl + '/course/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
                that.courseList = response.data.data
                console.log(that.courseList)
            })
        },
        addCourse () {
            let that = this
            this.showDrawer = true
            that.http.post(globalUrl + '/category/queryList', { token: window.sessionStorage.getItem('token') }).then(function (response) {
                that.categoryList = response.data.data
            })
        },
        // 上传笔记封面图片
        beforUpload (file) {
            this.uploadCourse.file = file
            //阻止自动上传
            return false
        },
        uploadModelModal (courseId) {
            let that = this
            if ( that.uploadCourse.file === '' || that.uploadCourse.file === null ) {
                that.msg.error('上传图片为空')
                return
            }
            let config = {
                headers: { 'Content-Type': 'multipart/form-data' }
            }
            //以formData形式上传
            var param = new FormData()
            param.append('file', that.uploadCourse.file)
            param.append('courseId', courseId.id)
            that.http.post(globalUrl + '/course/uploadCover', param, config).then((res) => {
                if ( res.data.code == '000000' ) {
                    that.msg.success('上传封面成功')
                    that.reload()
                } else {
                    that.msg.error('上传封面失败')
                }
            })
        },
        saveCourse (course) {
            console.log(this.courseEntity)
            this.http.post(globalUrl + '/course/saveCourse', this.courseEntity).then(res => {
                console.log(res)
                if (res.data.code === '000000'){
                    this.reload()
                }
            }).catch(err => {
                console.log(err)
            })
        }
    }
}
</script>

<style>
.course-cover img{
    width: 100%;
}
</style>
